<template>
  <view class="page-container">
    <wd-popup v-model="props.showTouristAddress" custom-style="border-radius:12rpx;" position="bottom" @enter="initEvent">
      <view class="popup-container pd20">
        <view class="header-container flex items-center justify-between">
          <wd-icon name="arrow-left" size="22px" @click="handleGoBack(false)"></wd-icon>
          <view class="title">选择收货地址</view>
          <text class="save-btn" @click="closeTourist">确定</text>
        </view>
        <scroll-view
            :scroll-y="true"
            class="tourist-address-container"
        >
          <view
              v-if="touristAddressList && touristAddressList.length > 0"
              v-for="(item,index) in touristAddressList"
              :key="item.id"
              :class="[
                  'tourist-address-item', 'flex', 'items-start',
                  activeTouristIndex === item.id ? 'choice-tourist-address-item' : ''
              ]"
              @click="choiceTouristAdd(item,index)"
          >
            <i class="iconfont icon-ditu"></i>
            <view class="info-container flex-1" >
              <view class="address">
                {{item.province}}{{item.city}}{{item.district}}{{item.address}}
              </view>
              <view class="contact">{{item.name}}-{{item.tel}}</view>
              <view class="default-address">
                <radio
                    :value="1"
                    :checked="item.isDefault"
                    color="#1b9c61"
                    style="transform: scale(0.7)"
                    @click="setDefaultContact(item)"
                />
                设为默认地址
              </view>
            </view>
            <view class="operation-container flex flex-col justify-between">
              <wd-icon name="delete" size="22px"  @click="deleteTouristAddress(item)"></wd-icon>
              <wd-icon name="edit-1" size="22px" color="#1B9C61" @click="showEditorTouristAddress(item)"></wd-icon>
            </view>
          </view>
          <wd-status-tip v-else image="content" tip="暂无收货地址" />
        </scroll-view>
        <view
            class="add-address-btn flex items-center justify-center"
            @click="handleShowEditTouristAddress"
        >
          <i class="iconfont icon-add"></i>
          <text>新增地址</text>
        </view>
      </view>
    </wd-popup>
    <EditTouristAddress
      :showEditTouristAddress="showEditTouristAddress"
      :editorTouristAddObj="editorTouristAddObj"
      @closeEditTouristAddress="handleCloseEditTouristAddress"
    ></EditTouristAddress>
  </view>
</template>

<script setup>
  import EditTouristAddress from "@/specialtySubPack/components/editTouristAddress/index.vue";
  import {deleteTouristAddressApi, setDefaultTouristAddress,touristAddressListApi } from "@/api/specialty";


  const props = defineProps({
    showTouristAddress:{
      type: Boolean,
      default: true
    },
    activeAddressId: {
		type: Number,
	}
  });
  const emits = defineEmits(["closeTouristAddress","updateTouristAddress"]);
  const activeTouristIndex = ref(0);
  const touristAddressList = ref([]);
  const showEditTouristAddress = ref(false);
  const editorTouristAddObj = ref({
    id: "",
    name: "",
    tel: "",
    province: "",
    city: "",
    district: "",
    address: "",
    isDefault: 0
  });
  const receiverObj = ref([]);

  const handleShowEditTouristAddress = async () => {
    for (let valueKey in editorTouristAddObj.value) {
      if(valueKey === "isDefault") {
        editorTouristAddObj.value[valueKey] = 0;
      }else {
        editorTouristAddObj.value[valueKey] = "";
      }
    }
    showEditTouristAddress.value = true;
  };
  const deleteTouristAddress = (item) => {
    let { id } = item;
    uni.showModal({
      title: "提示",
      content: "是否确认删除？",
      success: async (result) => {
        let { confirm } = result;
        if(confirm) {
          await deleteTouristAddressApi({id}).then(res => {
            emits("updateTouristAddress")
			queryTouristAddressList();
          });
        }
      }
    })
  };
  const showEditorTouristAddress = (item) => {
    for (let itemKey in item) {
      editorTouristAddObj.value[itemKey] = item[itemKey];
    }
    showEditTouristAddress.value = true;
  };
  const closeTourist = () => {
	  if (!receiverObj.value) {
		  let tipContent = "";
		  tipContent = "请选择地址";
		  if(tipContent) {
		    uni.showToast({
		      icon: "none",
		      title: tipContent
		    })
		    return;
		  }
	  };
    emits("closeTouristAddress",{activeAddress: receiverObj.value});
  };
  const handleGoBack = async (isUpdateTouristAddressList) => {
	  if (!!receiverObj.value) {
		  emits("closeTouristAddress");
		  return;
	  };
	  emits("closeTouristAddress",{activeAddress: {}});
  };
  const choiceTouristAdd = (item,index) => {
    activeTouristIndex.value = item.id;
	const {province, city, district, address, name, tel,id} = touristAddressList.value.find(item => item.id === activeTouristIndex.value);
	receiverObj.value = {
	  consigneeAddress: province + city + district + address,
	  consigneeName: name,
	  consigneePhone: tel,
	  id: id,
	};
  };
  const handleCloseEditTouristAddress = async (event) => {
    let {isUpdateTouristAddList} = event;
    if(isUpdateTouristAddList) {
      emits("updateTouristAddress");
    }
    showEditTouristAddress.value = false;
	await queryTouristAddressList();
  };
  // 获取收货地址列表
  const queryTouristAddressList = async () => {
    await touristAddressListApi({}).then(res => {
		touristAddressList.value = res.result;
      if(res && res.result.length > 0) {
        const {province, city, district, address, name, tel,id} = res.result.find(item => item.isDefault === 1) || res.result[0];
        receiverObj.value = {
          consigneeAddress: province + city + district + address,
          consigneeName: name,
          consigneePhone: tel,
		  id: id,
        };
      }
	  if (touristAddressList.value.length == 1) {
		  activeTouristIndex.value = receiverObj.value.id;
	  }
    });
  };
  
  const setDefaultContact = async (item) => {
   let {isDefault, id} = item;
   await setDefaultTouristAddress({id, isDefault: isDefault ? 0 : 1}).then(res => {
     emits("updateTouristAddress");
   });
   await queryTouristAddressList();
  };
  
  // 进入组件时触发
  const initEvent = async () => {
	  await queryTouristAddressList();
	  activeTouristIndex.value = props.activeAddressId ? parseInt(props.activeAddressId) : parseInt(receiverObj.value.id);
  };
</script>

<style lang="scss" scoped>
.page-container {
  z-index: 999999 !important;
  .popup-container {
    height: 60vh;
    background: linear-gradient(180deg, rgba(204,234,214,1) 0%, rgba(226,243,231,.5) 10%, rgba(255,255,255,1) 100%);
    .header-container {
      padding-bottom: 26rpx;
      border-bottom: 1rpx solid #C0C2B3;
      .title {
        font-size: 29rpx;
        font-weight: bold;
      }
      .save-btn {
        padding: 10rpx 31rpx;
        font-size: 22rpx;
        border-radius: 7rpx;
        border: 1rpx solid #508963;
      }
    }
    .tourist-address-container {
      margin-top: 50rpx;
      width: 100%;
      height: 42vh;
      .tourist-address-item {
        box-sizing: border-box;
        min-height: 174rpx;
        font-size: 25rpx;
        border-radius: 10rpx;
        padding: 32rpx;
        margin-bottom: 26.5rpx;
        border: 1rpx solid #C0C2B3;
        .icon-ditu {
          font-size: 40rpx;
        }
        .info-container {
          padding: 0 20rpx;
          .contact {
            margin-top: 16.5rpx;
          }
          .default-address {
            margin-top: 25rpx;
          }
        }
        .operation-container {
          min-height: 150rpx;
        }
      }
      .tourist-address-item:last-child {
        margin-bottom: 0;
      }
      .choice-tourist-address-item {
        background-color: #FDFFEB;
      }
    }
    .add-address-btn {
      margin-top: 40rpx;
      padding: 20rpx 0;
      border-radius: 10rpx;
      background: #1B9C61;
      .icon-add {
        font-size: 40rpx;
        color: #FFFFFF;
      }
      text {
        margin-left: 16.5rpx;
        font-size: 29rpx;
        color: #FDFFEB;
      }
    }
  }

}
</style>
